補講一個前面忘了講的部份 — 要怎麼在React裡加CSS？

CSS很好用，但是它一個最大的缺點是所有變數都是全域，為了避免元件間的樣式互相影響，於是有了BEM之類的CSS命名法。

然而React卻是用inline的方式來載入CSS，它為元件的className後面加上一串亂數，使得在A元件的樣式只會作用在A元件而不會是B元件，即使二個元件都有相同的className，卻因為加上的亂數使得二個className成為不一樣，有效將樣式限制在元件scope內。

前面在建頁面佈局時，引用的 React-Toolbox 由於Layout是用Flex排版，我們自己加的 content div 由於沒有加上 flex 屬性，內容物被擠到下面去，現在就來讓它正常顯示。

首先建新檔案 app.css
將 .content 加上 flex 值

.content {
  flex: 1 0 0px;
}

React要怎麼引入CSS呢？和JS檔案一樣，用import.
由於class是React保留的關鍵字，所以不能用, 因此JSX新增了className這個關鍵字來代替。因為我們已經把app.css載入到appStyle變數裡了，取得.content的樣式就用appStyle.content.

import React from 'react';
import { AppBar, Layout } from 'react-toolbox';
import appStyle from './app.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.data = props.data;
  }
  render() {
    return (
      <div>
        <Layout>
          <AppBar />
          <div className={appStyle.content}>
            <div>相簿</div>
            <div>
              albums
            </div>
          </div>
        </Layout>
      </div>
    );
  }
}

export default App;